<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>售后基本信息</span>
      </div>
      <div class="text item">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>售后订单号：{{after_sale.bn}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>平台订单号：{{after_sale.order_no}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>店铺订单号：{{after_sale.order_shop_no}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>申请时间：{{after_sale.created_at}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <span>售后服务类型：{{after_sale.type_const[after_sale.type]}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>所属商家：{{after_sale.shop_name}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>售后状态：{{after_sale.status_const[after_sale.status]}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>申请售后原因：{{after_sale.reason}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>申请描述：{{after_sale.user_remark}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <div class="voucher-container">
                <span>图片凭证信息：</span>
                <span v-if="after_sale.images!=null&&after_sale.images.length>0">
                  <img class="goods-img"  v-for = '(i,index) in after_sale.images' :key="index" :src="i" alt=""  @click="artwork(i)">
                </span>
                <span v-else>
                    无
                </span>
              </div>

            </div>
          </el-col>
        </el-row>

      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>售后订单商品信息</span>
      </div>
      <div class="text item">
        <table style="border-collapse: collapse;width:50%" class="table-container">
          <tr>
            <td>订单号</td>
            <td>商品</td>
            <td>单价（元）</td>
            <td>数量</td>
            <td>总金额</td>
          </tr>
          <tr>
            <td>{{after_sale.order_no}}</td>
            <td>
              <a class="img-container" :href=itemLink(order_goods.item_id,order_goods.channel) target="_blank">
                <img class="goods-img" :src="order_goods.primary_image" alt=""/>
              </a>
              <span class="img-title" >{{order_goods.title}}</span>
            </td>
            <td>￥{{order_goods.transaction_price}}</td>
            <td>{{order_goods.num}}</td>
            <td>￥{{order_goods.payment}}</td>
          </tr>
        </table>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>售后处理结果信息</span>
      </div>
      <div class="text item">
        <table style="border-collapse: collapse;width:50%" class="table-container">
          <tr>
            <td>售后处理结果</td>
            <td>退款处理</td>
          </tr>
          <tr>
            <td>审核状态：{{after_sale.status_const[after_sale.status]}}</td>
            <td>退款金额：￥{{after_sale.refund_amount}}</td>
          </tr>
          <tr>
            <td>商家处理申请说明：{{after_sale.shop_remark}}</td>
            <td>退款状态：{{after_sale.refund_status_const[after_sale.refund_status]}}</td>
          </tr>
        </table>
      </div>
    </el-card>
  </div>
</template>

<script>
  import itemLink from '@/mixins/itemLink'

  export default {
    props: {
      detailInfo: {
        type: Object,
        default: ''
      }
    },
    name: "applyafter",
    mixins:[itemLink],
    data() {
      return {
        after_sale: this.detailInfo.after_sale,
        order_goods: this.detailInfo.order_goods,
        activeName: 'first'
      }
    },
    methods:{
      artwork(i){
        window.open(i)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box-card {
    margin-top: 20px;
  }

  .table-container {
    border: 1px solid #eee;
    tr {
      width: 60%
    }
    td {
      text-align: center;
      min-width: 20%
    }
  }
  .row-thr{
    margin-bottom:30px
  }
  .img-container{
    width:20%;
    float:left;
  };
  img-title{
    display: block;
    width:80%;
    float:right;
    padding-top:30px
  };
  .voucher-container{
    span{
      display: block;
      float:left;
    }
  };
  .goods-img{
    width:75px;
    //margin-right:10px
  }
</style>
